<!-- 知识库平台 - 双优化案例库 - 查看 from 停缓建详情 -->
<template>
  <base-breadcrumb :breadcrumb="true">
    <a-card :bordered="false">
      <title-name title="双优化案例信息" />
      <a-row :gutter="24">
        <a-col :md="8" :sm="8">
          <a-form-item label="双优化立项名称" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="formModal.planName" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-item label="优化类型" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="formModal.category" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-item label="详细分类" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="formModal.opDetailType" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-item label="工程类别" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="formModal.projectType" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-item label="分部" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="formModal.part" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item label="使用部位" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="formModal.useSite" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item label="优化背景" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="formModal.optimizationBackground" type="textarea" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item label="优化理由" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="formModal.optimizationRationale" type="textarea" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item label="适用范围" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="formModal.applicationScope" type="textarea" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item label="使用提示" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="formModal.usingTips" type="textarea" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item label="现场实施照片" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <UploadList :upload-arrys.sync="formModal.fileList" uploadType="image" :disabled="true" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-card>

    <div class="page-btn-right-top">
      <a-button type="primary" @click="goBack">
        关闭
      </a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
import { knowledgeOptimizeDetail } from '@/api/design/knowledgeBase/optimization'
import UploadList from '@/components/UploadList'
import ARow from 'ant-design-vue/es/grid/Row'

export default {
  name: 'KnowledgeBaseOptimizationDetail',
  components: {
    ARow,
    UploadList
  },
  data() {
    return {
      // 详情数据模型
      formModal: {
        planName: null, //  双优化立项名称
        category: null, //  优化类型
        opDetailType: null, //  详细分类
        part: null, //  分部
        useSite: null, //  使用部位
        optimizationBackground: null, //  优化背景
        optimizationRationale: null, //  优化理由
        applicationScope: null, //  适用范围
        usingTips: null, //  使用提示
        fileList: [] //  现场实施照片
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 关闭
    goBack() {
      this.$multiTab.close(this.$route.fullpath)
    },
    // 查询详情
    getDetail() {
      const caseId = this.$route.query.caseId
      knowledgeOptimizeDetail({ caseId }).then(res => {
        this.formModal = res.data
      })
    }
  }
}
</script>
